<template>
	<a-drawer :title="titleVal" placement="right" :closable="false" v-model:visible="show">
		<div>
			<div v-if="tipVal">{{ tipVal }}</div>
			<div v-for="item in listVal" :key="item" class="mt-1">
				<div
					v-if="item.substr(item.lastIndexOf('.') + 1, item.length).toLowerCase() === 'pdf'"
					class="relative w-[100px] h-[100px] mr-[8px] border-solid border-[1px] border-gray-300 cursor-grabbing"
					@mouseenter="previewStatusData[item] = true"
					@mouseleave="previewStatusData[item] = false"
				>
					<img :width="100" src="/src/assets/images/pdf.png" class="object-contain" />
					<transition name="toggle">
						<div
							v-if="previewStatusData[item]"
							class="absolute top-0 left-0 w-[100px] h-[100px] flex justify-center items-center bg-gray-600/[.6]"
							@click="onPdfPreview(item)"
						>
							<eye-outlined class="cursor-pointer" :style="{ fontSize: '16px', color: 'white' }" />
							<span class="text-white ml-1">预览</span>
						</div>
					</transition>
				</div>
				<a-image v-else :width="300" :src="item" />
			</div>
		</div>
	</a-drawer>
</template>

<script setup>
	const show = ref(false)

	const titleVal = ref('')
	const tipVal = ref('')
	const listVal = ref([])

	const previewStatusData = ref({})
	const onPdfPreview = (url) => {
		window.open(url.replace('http://', 'https://'))
	}

	const open = ({ title = '查看', tip = '', list = [] }) => {
		titleVal.value = title
		tipVal.value = tip
		listVal.value = list

		previewStatusData.value = list.reduce((total, item) => ({ ...total, item: false }), {})

		show.value = true
	}

	defineExpose({
		open
	})
</script>

<style scoped>
	@keyframes toggle {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	.toggle-enter-active {
		animation: toggle 0.2s linear;
	}
	.toggle-leave-active {
		animation: toggle 0.2s linear reverse;
	}
</style>
